<template>
    <div class="search">
        <Title2>
            <van-icon name="arrow-left" slot="back" @click="$router.go(-1)" />
            <input type="text" v-model="value" slot="title" class="input" placeholder="请输入内容"/>
            <div slot="search" v-if="value.length>0" class="ddd" @click="search">搜索</div>
            <div slot="search" v-if="value.length==0" class="ddd">取消</div>
        </Title2>
        <div class="history" v-if="value.length==0">
            <div class="title">
                <h3>历史记录</h3>
                <van-icon name="delete" @click="remove"/>
            </div>
            <div class="histtory_wrapper">
                <div class="history_item" v-for="(item, index) in history" :key="index" @click="search1(item)">
                    {{item}}
                </div>
            </div>
        </div>
        <div class="course" v-if="value.length>0 && $route.query.name">
            <Card3 :data="course" @toAsk="toAsk" @toTeacherInfo="toTeacherInfo"/>
        </div>
        <div class="course" v-else>
            <Card2 :data="course" @toCourseInfo="toCourseInfo"/>
        </div>
        <van-dialog
            v-model="showDialog"
            @confirm='toLogin'
            confirm-button-text="立即登录"
            >
            <i class="close" @click="showDialog=false"></i>
            <img src="../assets/images/feiji.png">
            <p class="LoginText">赶紧登录一下吧</p>
            <p class="message">立即预约一对一辅导，浏览更多视频课程~</p>
        </van-dialog>
        
    </div>
</template>

<script>
import {getHistoryItem,setHistoryItem,removeHistoryItem} from '../untils/localstrange';
import {courseBasis,getOtoCourse} from '../untils/netWork';
import Title2 from '../components/common/Title2';
import Card2 from '../components/common/Card2';
import Card3 from '../components/common/Card3';
    export default {
        data:()=>({
            value:'',
            history:getHistoryItem(),
            course:[],
            showDialog:false
        }),
        components:{
            Title2,Card2,Card3
        },
        methods:{
            toLogin(){
                this.$router.push("/login")
            },
            toCourseInfo(data){
                this.$router.push({
                    path:`/courseInfo/${data}`
                })
            },
            search1(item){
                this.value=item;
                this.search()
            },
            search(){
                
                var list=getHistoryItem();
                var index=list.findIndex((item)=>{
                    return item==this.value
                });
                console.log(index)
                if(index>=0){
                    list.splice(index,1);
                    list.unshift(this.value)
                }else{
                    if(list.length>9){
                        list.pop();
                        list.unshift(this.value)
                    }else{
                        list.unshift(this.value)
                    }
                }
                
                this.history=list
                setHistoryItem(list);
                var data={
                    keywords: this.value
                }
                var data2={
                    page:1,
                    limit:10,
                    teacher_name:this.value
                }
                if(this.$route.query.name){
                    this.getOtoCourseHttp(data2)
                }else{
                    this.getCourseBasis(data)
                }

            },
            remove(){
                this.history=[];
                removeHistoryItem();
            },
            getCourseBasis(data){
                courseBasis(data).then(res=>{
                    this.course=res.data.list;
                    console.log(res.data)
                });
            },
            getOtoCourseHttp(data){
                getOtoCourse(data).then(res=>{
                    this.course=res.data;
                    console.log(res.data)
                });
            },
            toTeacherInfo(id){
                if(!window.localStorage.getItem("usename")){
                    this.showDialog=true;
                }else{
                    this.$router.push("/teacherInfo")
                }
            },
            toAsk(id){
                if(!window.localStorage.getItem("usename")){
                    this.showDialog=true;
                }else{
                    this.$router.push("/ask")
                }
            },
        },
        watch:{
            value(){
                if(this.value.length==0){
                    this.course=[]
                }
            }
        },
        mounted(){
            console.log(this.$route.query.name)
        }
    }
</script>

<style lang="scss" scoped>
.history{
    width: 90%;
    margin: 0 auto;
    
    .title{
        margin: 10px 0;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .histtory_wrapper{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-flow: wrap;
        .history_item{
            padding:5px 10px;
            background: rgb(240, 240, 240);
            border-radius: 8px;
            margin-right: 10px;
            margin-bottom: 10px;;
        }
    }
    
}
.course{
        padding: 10px;
        background: rgb(240, 240, 240);
    }
    .van-dialog{
      width:80%;
      height:360px;
      background:rgba(255,255,255,1);
      border-radius:30px;
      text-align: center;
      // .van-dialog__content,.van-dialog__footer{
      //   text-align: center;
      // }      
      .close{
        width: 20px;
        height: 20px;
        position: absolute;
        top: 15px;
        right: 20px;
        background-image: url('../assets/images/icon_member_account_close.png');
        background-size: 100%;
        background-position: center;
      }
      img{
        width: 100%;
        height: 200px;
        margin-top: 20px;
      }
      .LoginText{
        font-size:16px;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(51,51,51,1);
        line-height: 44px;
      }
      .message{
        font-size:13px;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(153,153,153,1);
        line-height: 38px;
      }
      .van-button{
        width:472px;
        height:80px;
        background:rgba(235,97,0,1);
        border-radius:40px;
        font-size:30px;
        font-family:PingFang SC;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 80px;
        margin-top: 57px;
      }
    }
</style>